<template>
  <div class="main-box">
    <van-sticky>
      <van-nav-bar title="提醒事项" left-text="返回" right-text="添加" left-arrow @click-left="onClickLeft"
        @click-right="onClickRight">
      </van-nav-bar>
    </van-sticky>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list :loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-swipe-cell v-for="(item, index) in tableData" :key="index">
          <van-cell :title="getItemTitle(item)" :value="getItemState(item)" center is-link :label="getItemLabel(item)"
            @click="
              () =>
                router.push({
                  name: 'remindEdit',
                  query: { remindItem: JSON.stringify(item) }
                })
            ">
          </van-cell>
          <template #right>
            <van-button square :text="item.delFlag == 0 ? '删除' : '恢复'" :type="item.delFlag == 0 ? 'danger' : 'primary'"
              class="delete-button" @click="onClickButton(item)" />
          </template>
          <template #left>
            <van-button square text="物理删除" type="danger" class="delete-button" @click="onClickDelete(item)" />
          </template>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { pageRemind, delFlagRemind, delRemind } from '@/requests/remindItem'

const router = useRouter()
const loading = ref(false)
const refreshing = ref(false)
const finished = ref(false)
const currentPage = ref(0)
const pageSize = ref(20)
const tableData = ref([])

// 获取列表数据
const getTableData = async type => {
  const res = await pageRemind(currentPage.value, pageSize.value)
  if (res.code === 200) {
    pushData(res.data, type)
  } else {
    showToast({
      type: 'fail',
      message: res.message || '获取数据失败',
      duration: 1500
    })
  }

}

// 处理列表数据
const pushData = (data, type) => {
  if (type === 0) {
    tableData.value = data.records
  } else if (type === 1) {
    tableData.value.push(...data.records)
  } else if (type === 2) {
    const start = (data.current - 1) * data.size
    const resData = tableData.value.slice(0, start)
    resData.push(...data.records)
    tableData.value = resData
  }

  if (currentPage.value > data.pages) {
    currentPage.value = data.pages
  }

  if (data.current >= data.pages) {
    finished.value = true
  }

  loading.value = false
  refreshing.value = false
}

// 下拉刷新
const onRefresh = () => {
  currentPage.value = 1
  finished.value = false
  loading.value = true
  getTableData(0)
}

// 上拉加载
const onLoad = () => {
  currentPage.value++
  getTableData(1)
}

// 删除/恢复
const onClickButton = async item => {
  const delFlag = item.delFlag === 0 ? 1 : 0
  try {
    const res = await delFlagRemind(item.id, delFlag)
    if (res.code === 200) {
      getTableData(2)
      showToast({
        type: 'success',
        message: '操作成功',
        duration: 1500
      })
    } else {
      showToast({
        type: 'fail',
        message: res.message || '操作失败',
        duration: 1500
      })
    }
  } catch (error) {
    showToast({
      type: 'fail',
      message: '网络错误，请稍后重试',
      duration: 1500
    })
  }
}

// 物理删除
const onClickDelete = item => {
  showDialog({
    title: '确定删除吗？',
    message: '删除后将无法恢复',
    showCancelButton: true,
    width: '80%'
  }).then(async () => {
    try {
      const res = await delRemind(item.id)
      if (res.code === 200) {
        getTableData(2)
        showToast({
          type: 'success',
          message: '删除成功',
          duration: 1500
        })
      } else {
        showToast({
          type: 'fail',
          message: res.message || '删除失败',
          duration: 1500
        })
      }
    } catch (error) {
      showToast({
        type: 'fail',
        message: '网络错误，请稍后重试',
        duration: 1500
      })
    }
  })
}

// 返回
const onClickLeft = () => {
  router.push('/')
}

// 添加
const onClickRight = () => {
  router.push('/remindAdd')
}

// 获取项目标题
const getItemTitle = item => {
  return item.name
}

// 获取项目状态
const getItemState = item => {
  return item.delFlag === 1 ? '已删除' : item.state
}

// 获取项目标签
const getItemLabel = item => {
  return `${item.remindType}:${item.remindTime}`
}

onMounted(() => {
  currentPage.value = 0
})
</script>

<style scoped lang="scss">
.main-box {
  background-color: #f1f0f0;
  padding: 0;

  .van-pull-refresh {
    min-height: 100vh;
  }
}

.van-list {
  padding-top: 10px;

  .van-cell {
    text-align: left;
  }

  .delete-button {
    height: 100%;
  }
}
</style>
